/**
 * webpack是前端工程化打包工具，主要是将代码进行打包，从而生成生产环境下代码文件，再进行上传至生产环境。
 *
 * 题外：
 *  vi 指定行数替换
 *      :1,25s/#//g
 *      将第1行到第25行之间的字符串"#"全局替换为空字符串
 *
 * 安装webpack步骤：
 *  1. 初始化npm环境：npm init -y
 *      这一步主要是为生成package.json文件
 *  2. 安装webpack：npm install webpack webpack-cli
 *      注意，webpack4.X版本需要同时安装webpack和webpack-cli两个模块
 *  3. 创建webpack.config.js文件
 *  4. 在webpack.config.js，设置配置对象const config = { 填入对应的配置项 }
 *  5. 在webpack.config.js，导出对应config对象
 *  6. 在package.json，在scripts中加入dev配置，dev: "webpack"
 *      这一步的主要是为了后面不用输入webpack命令进行打包，而是通过 npm run dev 方式去替代
 *  7. 相关配置
 *      mode: "development" | "production"
 *          development 对应开发环境
 *          production 对应生产环境
 *          两者区别是development环境下不会压缩代码，而production环境下，会压缩代码
 *
 *      entry: path.join(__dirname, "./src/index.js")
 *          代表当前要打包的js文件入口路径是 当前目录+"./src/index.js"
 *
 *      output 代表打包完成后，输出到哪个目录，哪个文件
 *          path 代表输出的目录
 *          filename 代表输出的文件名
 *
 *      plugins是一个数组，用于存储各类打包插件的配置
 *          html-webpack-plugin
 *              安装html-webpack-plugin： cnpm install html-webpack-plugin -D
 *              html-webpack-plugin 将类型为html的文件进行打包
 *              template 代表模板所在的路径为 当前目录 + "./src/index.html"
 *              filename 代表输出的路径为index.html
 *              当使用webpack的时候，文件的输出路径默认为output.path对应路径 + 在html-webpack-plugin里配置的filename
 *              当使用webpack-server-dev的时候，文件不会实际输出，而是在 localhost:8080/index.html 下
 *
 *     devServer
 *          https://webpack.js.org/configuration/dev-server/#devserver
 *          devServer 设置代理的host和端口，适用于当 npm run dev 对应的是 webpack-dev-server 的时候，如果需要配置域名和端口，则可以使用该配置项，如果使用 webpack 则会被忽略
 *          不过也可以通过package.json文件进行启动设置，如下：
 *          "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
 *          open 代表是否通过默认浏览器打开，true代表是，false代表不用打开
 *          host 代表服务器host
 *          port 代表服务器port
 *
 *     module
 *          加载非js模块的文件
 *          test 代表解析文件名为符合条件的
 *          use 代表调用loader的顺序，一般css的，应该是先style-loader，然后才是css-loader，这个不能乱
 *          支持解析css文件
 *              cnpm install style-loader css-loader -D
 *          支持解析less文件
 *              cnpm install style-loader css-loader less-loader less -D
 *          支持解析scss文件
 *              cnpm install style-loader css-loader sass-loader node-sass -D
 *          支持解析为自动添加浏览器前缀
 *              cnpm install postcss-loader autoprefixer -D
 *              项目根目录建立postcss配置文件 postcss.config.js
 *                  const autoprefixer = require("autoprefixer")
 *                  module.exports = {
 *                      plugins: [autoprefixer]
 *                  }
 *              webpack.config.js
 *                  module: {
 *                      rules: [
 *                          {test: /\.css$/, use: ["style-loader", "css-loader", "postcss-loader"]}
 *                      ]
 *                  }
 *          支持解析图片和字体文件
 *              cnpm install url-loader file-loader -D
 *          支持js高级语法，如class关键字等
 *              cnpm install babel-loader @babel/core @babel/runtime -D
 *              cnpm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
 *              项目根目录创建babel.config.js
 *              module.exports = {
 *                  presets: ["@babel/preset-env"],
 *                  plugins: ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"]
 *              }
 *              在webpack.config.js配置
 *              module:{
 *                  rules: [
 *                      {
 *                          test: /\.js$/,
 *                          use: "babel-loader",
 *                          exclude: /node_modules/
 *                      }
 *                  ]
 *              }
 *          支持解析vue文件
 *              cnpm install vue-loader vue-template-compiler -D
 *              const VueLoaderPlugin = require("vue-loader/lib/plugin")
 *              module.exports = {
 *                  module: {
 *                      rules: [
 *                          {test: /\.vue$/, use:"vue-loader"}
 *                      ]
 *                  },
 *                  plugins: [new VueLoaderPlugin()]   
 *              }
 * 
 *
 *   8. 每次修改 webpack.config.js 都需要重新执行 npm run dev 才能生效
 *
 *     webpack 在开发时的问题：每次更改完代码都需要重新运行 npm run dev ，即可 webpack
 *     解决办法，使用 webpack-dev-server ，这个模块也会根据 webpack.config.js 去加载对应的配置，而且只需一次启动后，将直接设置一个http服务器，当打包的文件变动的时候，将自动在页面上显示出来
 *
 *     为什么index.js使用import来引入包，webpack.config.js使用require来引入包
 *     index.js import关键字使用环境是在浏览器下，通过es6的语法规范，使用import来引入前端包。但是目前大部分浏览器不支持import对应包，所以需要经过webpack打包进行转换后，即可将代码上传带生产环境
 *     webpack.config.js require关键字使用环境是在node下，node支持以require来加载包，webpack在打包的时候，就是在node环境下执行，所以必须按照node的环境要求来引入对应的包，从而实现代码的打包
 *
 *
 * webpack.config.js 是配置webpack打包的js文件，具体配置参数可以参考以下网址
 * https://www.webpackjs.com/concepts/
 */

const path = require("path")

const HtmlWebpackPlugin = require("html-webpack-plugin")
const VueLoaderPlugin = require("vue-loader/lib/plugin")

const config = {
    mode: "development",
    entry: path.join(__dirname, "./src/index.js"),
    output:{
        path: path.join(__dirname, "./dist"),
        filename: "bundle.js"
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "./src/index.html"),
            filename: "index.html"
        }),
        new VueLoaderPlugin(),
    ],
    devServer: {
        open: true,
        host: "localhost",
        port:8188
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "postcss-loader"
                ]
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ]
            },
            {
                test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                use: "url-loader?limit=16940" // 代表文件的大小，当只有一个loader的时候，可以用这种方式
                // 如果加载图片文件小于limit对应的字节数，那么会解析成base64格式，如果大于limit对应字节数，则将会以url加载
            },
            {
                test: /\.js$/,
                use: "babel-loader",
                exclude: /node_modules/
            },
            {
                test: /\.vue$/, 
                use:"vue-loader"
            }
        ]
    }
}
module.exports = config